<script lang="ts">
export default {
  name: 'engineerList',
};
</script>
<script setup lang="ts">
import {
  reactive,
  ref,
  watchEffect,
  onMounted,
  getCurrentInstance,
  toRefs,
} from 'vue';

import {
  ElTree,
  ElForm,
  ElMessageBox,
  ElMessage,
  UploadFile,
  ElTreeSelect,
} from 'element-plus';

import {
  Search,
  Plus,
  Refresh,
  Delete,
  Download,
  Top,
  UploadFilled,
} from '@element-plus/icons-vue';
import {
  engineerAdd,
  engineerUpdate,
  getEngineerForm,
  listEngineerPages,
  engineerShPages,
  casualEngineerAdopt,
  casualEngineerReject
} from '@/api/engineer/index';
import { EngineerQuery, EngineerType } from '@/api/engineer/types';
import { listServiceTypeOptions } from '@/api/service-type';
import { listServiceTypeLabelOptions } from '@/api/service-type-label';

const emit = defineEmits(['engineerClick']);

const queryFormRef = ref(ElForm); // 查询表单
const dataFormRef = ref(ElForm); // 用户表单

const { proxy }: any = getCurrentInstance();

const state = reactive({
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [] as number[],
  // 总条数
  total: 0,
  engineerList: [] as EngineerType[],
  dialog: {
    visible: false,
  } as DialogType,
  formData: {} as EngineerType,
  // 性别下拉项
  genderOptions: [] as OptionType[],
  serviceTypeOptions: [] as OptionType[],
  serviceTypeLabelOptions: [] as OptionType[],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as EngineerQuery,
  rules: {
    engineerRealname: [
      { required: true, message: '请输入真实姓名', trigger: 'blur' },
    ],
    engineerSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    typeIds: { required: true, message: '请选择服务类型', trigger: 'blur' },
    idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
  },
});

let {
  ids,
  loading,
  genderOptions,
  serviceTypeOptions,
  serviceTypeLabelOptions,
  queryParams,
  formData,
  engineerList,
  total,
  dialog,
  rules,
} = toRefs(state);

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  engineerShPages(state.queryParams).then(({ data }) => {
    state.engineerList = data.list;
    state.total = data.total;
    state.loading = false;
  });
}

/**
 * 重置查询
 */
function resetQuery() {
  console.log(queryFormRef.value);

  queryFormRef.value.resetFields();
  handleQuery();
}

function handleSelectionChange(selection: any) {
  state.ids = selection.map((item: any) => item.id);
}

function handleRowClick(row: any) {
  emit('engineerClick', row);
}


/**
 * 审核
 */
async function handleExamine(row: any) {
  casualEngineerAdopt(row.id).then(()=>{
      ElMessage.success('操作成功');
      resetQuery()
  })
}
async function handleNoExamine(row:any) {
  casualEngineerReject(row.id).then(()=>{
      ElMessage.success('操作成功');
      resetQuery()
  })
}


/**
 * 获取性别下拉项
 */
function getGenderOptions() {
  proxy.$listDictItemsByTypeCode('gender').then((response: any) => {
    state.genderOptions = response?.data;
  });
}
async function getServiceTypeOptions() {
  listServiceTypeOptions().then((response) => {
    state.serviceTypeOptions = response.data;
  });
}

async function serviceTypeChange(typeList: number[]) {
  if (typeList.length) {
    let serviceTypeLabelList: OptionType[] = [];
    for (const el of typeList) {
      let children: OptionType[] = [];
      await listServiceTypeLabelOptions(el).then((response) => {
        children = response?.data as OptionType[];
      });
      serviceTypeLabelList.push(...children);
    }
    state.serviceTypeLabelOptions = serviceTypeLabelList;
  } else {
    state.serviceTypeLabelOptions = [];
  }
}

onMounted(() => {
  // 初始化性别字典
  getGenderOptions();
  // 用户列表
  handleQuery();
  getServiceTypeOptions();
});
</script>
<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="name" label="姓名">
          <el-input v-model="queryParams.name" placeholder="请输入姓名进行搜索" clearable @keyup.enter="handleQuery" style="width: 200px" />
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="queryParams.phone" placeholder="请输入手机号进行搜索" clearable @keyup.enter="handleQuery" style="width: 200px" />
        </el-form-item>

        <el-form-item label="服务类型">
          <el-select v-model="queryParams.typeId" placeholder="请选择服务类型" clearable style="width: 200px">
            <el-option v-for="item in serviceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="服务标签">
          <el-select v-model="queryParams.serviceLabel" placeholder="请选择服务标签" clearable style="width: 200px">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="用户性别" prop="gender">
          <el-select style="width: 200px;" v-model="queryParams.engineerSex" placeholder="请选择">
            <el-option label="未知" :value="0" />
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="是否签订合同">
          <el-select v-model="queryParams.isContract" placeholder="全部" clearable style="width: 200px">
            <el-option label="是" :value=1 />
            <el-option label="否" :value=0 />
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <template #header>
      </template>

      <el-table ref="dataTableRef" v-loading="loading" :data="engineerList" @selection-change="handleSelectionChange" @row-click="handleRowClick" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="姓名" align="center" prop="engineerRealname" min-width="80" />
        <el-table-column label="性别" align="center" prop="engineerSexName" width="60" />
        <el-table-column label="电话" align="center" prop="phone" width="150" />
        <el-table-column label="服务类型" align="center" prop="typeIds" width="150">
          <template #default="scope">
            <p v-if="!scope.row.typeIds">无</p>
            <el-tag style="margin-left: 2px" v-else v-for="item in scope.row.typeName.split(',')" :key="item">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务标签" align="center" prop="labelIds" width="150">
          <template #default="scope">
            <p v-if="!scope.row.labelIds">无</p>
            <el-tag style="margin-left: 2px" type="warning" v-else v-for="item in scope.row.labelName.split(',')" :key="item">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="身份证" align="center" prop="idcard" width="150" />
        <el-table-column label="签订合同" align="center" prop="isContract" width="90">
          <template #default="scope">
            <el-tag v-if="scope.row.isContract === 1" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cardImgPositive" label="头像" width="170">
          <template #default="scope">
            <el-image v-if="scope.row.headSculpture" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.headSculpture" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.headSculpture]" :preview-teleported="true" hide-on-click-modal/>
            <div v-else style="width: 140px;
              height: 100px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: white;">无</div>
          </template>
        </el-table-column>
        <el-table-column prop="cardImgPositive" label="证件图片人像" width="170">
          <template #default="scope">
            <el-image v-if="scope.row.cardImgPositive" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgPositive" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgPositive]" :preview-teleported="true" hide-on-click-modal/>
            <div v-else style="width: 140px;
              height: 100px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: white;">无</div>
          </template>
        </el-table-column>
        <el-table-column prop="cardImgNegative" label="证件图片国徽" width="170">
          <template #default="scope">
            <el-image v-if="scope.row.cardImgNegative" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgNegative" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgNegative]" :preview-teleported="true" hide-on-click-modal/>
            <div v-else style="width: 140px;
              height: 100px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: white;">无</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="state" width="150">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">未审核</el-tag>
            <el-tag v-if="scope.row.status === 1" type="success">审核中</el-tag>
            <el-tag v-if="scope.row.status === 2" >已通过</el-tag>
            <el-tag v-if="scope.row.status === 3" type="warning">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="160" />
        <el-table-column prop="updateTime" label="修改时间" align="center" width="160" />

        <el-table-column fixed="right" label="操作" align="center" width="170">
          <template #default="scope">
            <el-button type="success" v-if="scope.row.status === 0" link @click.stop="handleExamine(scope.row)">
              审核通过
            </el-button>
            <el-button type="danger" v-if="scope.row.status === 0" link @click.stop="handleNoExamine(scope.row)">
              审核驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- pagination -->
      <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
  </div>
</template>


<style scoped>
</style>
